Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interpolate gradients using OKLCH by default #14708

Merged
merged 2 commits into from
Oct 17, 2024

Conversation

adamwathan
Copy link
Member

This PR updates all of our gradient utilities to interpolate using OKLCH by default instead of sRGB. This results in a smoother transition between colors that preserves saturation throughout the gradient, rather than hitting the dreaded dull gray zone in between your color stops.

Here are a few examples comparing sRGB (top) to OKLCH (bottom):

image

We only apply a default interpolation mode when not using arbitrary values with the gradient utility.

Simplified but clear:

.bg-linear-to-r {
  background-image: linear-gradient(to right in oklch, var(--gradient-color-stops));
}

.bg-linear-[to_right] {
  background-image: linear-gradient(to right, var(--gradient-color-stops));
}

.bg-linear-[to_right_in_hsl] {
  background-image: linear-gradient(to right in hsl, var(--gradient-color-stops));
}

@adamwathan adamwathan requested a review from a team as a code owner October 17, 2024 18:42
@adamwathan adamwathan merged commit edb066e into next Oct 17, 2024
1 check passed
@adamwathan adamwathan deleted the feat/use-oklch-for-gradients branch October 17, 2024 20:16
@trcio
Copy link

trcio commented Oct 24, 2024

very happy I saw your tweet about this PR, would have never known about this sick color space otherwise ‼️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants